import { ModalForm, ProFormDigit, ProFormSwitch, ProFormText } from '@ant-design/pro-form';
import React, { useEffect } from 'react';
type UpdateFormProps = {
  formValue: Partial<ADMIN.Menu> | undefined;
  updateModalVisible: boolean;
  handleUpdateModalVisible: any;
  formRef: any;
  handleUpdate: (id: number | undefined, values: ADMIN.Menu) => void;
};

const UpdateFrom: React.FC<UpdateFormProps> = (props) => {
  const { formValue, formRef, handleUpdate, updateModalVisible, handleUpdateModalVisible } = props;
  useEffect(() => {
    formRef.current?.resetFields();
  }, [formRef, formValue]);

  return (
    <ModalForm<ADMIN.Menu>
      title="修改角色"
      width={500}
      visible={updateModalVisible}
      onVisibleChange={handleUpdateModalVisible}
      onFinish={async (values) => {
        handleUpdate(formValue?.id, values);
        return true;
      }}
      formRef={formRef}
      initialValues={formValue}
    >
      <>
        <ProFormText
          name="pid"
          label="父菜单"
          rules={[{ required: true, message: '请输入父菜单' }]}
          placeholder="请输入父菜单"
        />
        <ProFormText
          name="name"
          label="名称"
          rules={[{ required: true, message: '请输入名称' }]}
          placeholder="请输入名称"
        />
        <ProFormText
          name="route"
          label="路由"
          rules={[{ required: true, message: '请输入路由' }]}
          placeholder="请输入路由"
        />
        <ProFormText
          name="icon"
          label="图标"
          rules={[{ required: true, message: '请输入图标' }]}
          placeholder="请输入图标"
        />
        <ProFormDigit
          label="排序"
          name="sort"
          min={0}
          max={100000}
          width="sm"
          placeholder="请输入排序(越大越靠前)"
        />
        <ProFormSwitch name="display" label="是否显示" />
      </>
    </ModalForm>
  );
};

export default UpdateFrom;
